﻿import QtQuick 2.14
import QtQuick.Controls 2.14
import NewConRect 1.0
Rectangle {
    id:newconrect
    color: "lightsteelblue"
    radius : 3.9
    width: parent.width*0.6 - 20
    height: parent.height*0.5 - 20
    signal connectionSig(string str_ad,string str_port);
    property string ipAddress //获得输入框的ip地址和端口
    property string port

    Text{
        id:newcon_text
        anchors.top: newconrect.top
        anchors.topMargin: 10
        text: "新建连接"
        color: "black"
        font.pixelSize: 18
        font.bold: true
    }

    Row {
        id:textinput_row1
        anchors.top: newcon_text.bottom
        anchors.topMargin: 10
        spacing: 20

        Rectangle{
            width: 5
            height: 5
            color: "transparent"
        }

        Rectangle{
            implicitHeight: host_text.height
            implicitWidth: host_text.width
            clip: true ;
            Text{
                id:host_text
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 22
                //不需要文本转换
                renderType:Text.NativeRendering
                text:"主机"
            }
        }

        Rectangle{
            clip: true ;
            width: newconrect.width/2
            height:newconrect.height/10
            border.color: textinput_1.activeFocus ? "#c2e9fb" : "black"
            border.width: textinput_1.activeFocus ? 2 : 1

            //普通输入框
            TextField{
                id: textinput_1
                anchors.fill: parent
                leftPadding: 5
                rightPadding: 5
                color: "black"
                placeholderText: "ip地址/HostName"
                placeholderTextColor: "gray"
                horizontalAlignment: TextInput.AlignLeft
                verticalAlignment: TextInput.AlignVCenter
                //默认鼠标选取文本设置为false
                selectByMouse: true
                //选中文本的颜色
                selectedTextColor: "white"
                //选中文本背景色
                selectionColor: "black"
                //超出宽度时开启允许滚动，默认为true
                autoScroll: true
                echoMode: TextInput.Normal
                font{
                    family: "SimSun"
                    pixelSize: 16
                }
                //截取超出部分
                clip: true
                //默认Text.QtRendering看起来比较模糊
                renderType: Text.NativeRendering
                onTextChanged: ipAddress = text;
            }
        }


    }//Row的}

    Row{
        id:textinput_row2
        anchors.top: textinput_row1.bottom
        anchors.topMargin: 10
        spacing: 10

        Rectangle{
            width: 5
            height: 5
            color: "transparent"
        }

        Rectangle{
            implicitHeight: port_text.height
            implicitWidth: port_text.width
            clip: true ;
            Text{
                id:port_text
                verticalAlignment: Text.AlignVCenter
                font.pixelSize: 22
                //不需要文本转换
                renderType:Text.NativeRendering
                text:"端口号"
            }
        }

        Rectangle{
            clip: true ;
            width: newconrect.width/2
            height:newconrect.height/10
            border.color: textinput_2.activeFocus ? "#c2e9fb" : "black"
            border.width: textinput_2.activeFocus ? 2 : 1
            //输入框
            TextField{
                id: textinput_2
                anchors.fill: parent
                leftPadding: 5
                rightPadding: 5
                color: "black"
                placeholderText: "端口号"

                placeholderTextColor: "gray"
                horizontalAlignment: TextInput.AlignLeft
                verticalAlignment: TextInput.AlignVCenter
                //默认鼠标选取文本设置为false
                selectByMouse: true
                //选中文本的颜色
                selectedTextColor: "white"
                //选中文本背景色
                selectionColor: "black"
                //超出宽度时开启允许滚动，默认为true
                autoScroll: true
                echoMode: TextInput.Normal
                font{
                    family: "SimSun"
                    pixelSize: 16
                }
                //截取超出部分
                clip: true
                //默认Text.QtRendering看起来比较模糊
                renderType: Text.NativeRendering
                onTextChanged: port = text;
            }
        }
    }

    Rectangle{
       id:twobtnrect
       clip: true ;
       anchors.bottom: newconrect.bottom
       anchors.right: newconrect.right
       anchors.left: newconrect.left
       width: newconrect.width
       height: newconrect.height/5
       color:"transparent"


       MyButton {
           id:newcon_btn_1
           anchors.right: twobtnrect.right
           anchors.bottom:twobtnrect.bottom
           anchors.bottomMargin: 10
           anchors.rightMargin: 10
           text: "连接"
           widthMargin: 12
           heightMargin: 8
//           ipAddress : textinput_1.text
//           port : textinput_2.text
           onClicked: {
               console.log(textinput_1.textDocument)
               connectionSig(ipAddress,port)
           }
       }
       //连接newconrect.cpp中的onBtnConnectClicked的槽函数
       Connections{
           target: newconrect
           function onConnectionSig(str_ad,str_port){
                       NewConRect.onBtnConnectClicked(str_ad,str_port)
           }
       }


       MyButton {
           id:newcon_btn_2
           text: "确认"
           anchors.right:newcon_btn_1.left
           anchors.rightMargin: 10
           anchors.bottom:twobtnrect.bottom
           anchors.bottomMargin: 10
           widthMargin: 12
           heightMargin: 8

       }

    }
}//第四个rectangle的}

